<template>
  <div v-if="!message.is_del" class="message-item" :class="{ 'self': isSelf }">
    <p class="time">
      <span>{{ msgAt }}</span>
    </p>
    <div
      class="main"
      @mousemove="message.showToolbar = true"
      @mouseleave="message.showToolbar = false"
    >
      <img :src="avatar" class="avatar" />
      <div class="image-msg" v-if="is_img_type">
        <img :src="msg" class="viewer-img" title="点击查看" />
      </div>
      <div class="text" v-else v-html="msg"></div>
      <div v-if="message.showToolbar || openTool" :message="message">
        <el-dropdown @command="handleCommand" placement="top-start" @visible-change="handleChange">
          <p class="msg-tool">
            <i class="el-icon-more"></i>
          </p>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="copy" icon="el-icon-copy-document">复制</el-dropdown-item>
              <el-dropdown-item command="reply" icon="el-icon-chat-line-round">回复</el-dropdown-item>
              <el-dropdown-item command="undo" icon="el-icon-close">撤销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import config from "../../../config"
import { dateFormat } from "../../../utils/helper"
import { reactive, toRefs } from "vue"
import { delMessage } from "../../api/message"
import { ElMessage } from "element-plus"

const props = defineProps({
  message: {
    type: Object,
    required: true,
  }
})

const emit = defineEmits(['quote'])

const state = reactive({
  openTool: false,
})

const isSelf = props.message.from == 2

const avatar = props.message.from == 1 ? '/public/guest.png' : '/public/kf.png'

const time = props.message.created_at || +new Date
const msgAt = dateFormat(time, 'yyyy-MM-dd HH:mm:ss')

const is_img_type = props.message.type == 3

const msg = is_img_type
  ? config.apiUrl + props.message.content
  : props.message.content.replace(/\[em_([0-9]*)\]/g, '<img src="/public/face/$1.gif"/>')

const handleChange = (value) => {
  state.openTool = value
}

const copy = () => {
  //如果我们复制的是图片,在图片url中加入标识方便识别
  let copyContent = is_img_type
    ? props.message.content + '?src=copy&type=img'
    : props.message.content

  const input = document.createElement('input')
  input.setAttribute('readonly', 'readonly')
  input.setAttribute('value', copyContent)
  document.body.appendChild(input)
  input.setSelectionRange(0, 9999)
  if (document.execCommand('copy')) {
    input.select()
    document.execCommand('copy')
  } else {
    console.error('复制失败')
  }
  document.body.removeChild(input);
}

const undo = async () => {
  let result = await delMessage(props.message.id)
  if (result.status === 'success') {
    props.message.is_del = true
  } else {
    ElMessage.error('撤销失败')
  }
}

const reply = () => {
  emit('quote', {
    content: props.message.content,
    type: props.message.type,
    from: props.message.from,
  })
}

const handleCommand = (cmd) => {
  if (cmd === 'copy') {
    copy()
  } else if (cmd === 'undo') {
    undo()
  } else if (cmd === 'reply') {
    reply()
  }
}

const { openTool } = toRefs(state)

</script>

<style scoped>
.message-item {
  box-sizing: border-box;
  margin-bottom: 10px;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.message-item .main {
  padding: 5px 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
}

.message-item .time {
  font-size: 12px;
  color: #999;
  margin: 5px;
}

.message-item .avatar {
  margin: 0 10px 0 0;
  border-radius: 3px;
  height: 35px;
  width: 35px;
}

.message-item .text {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  max-width: 60%;
  font-size: 14px;
  text-align: left;
  word-break: break-all;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
}

.message-item .image-msg {
  display: inline-block;
  border-radius: 7px;
  height: auto;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.message-item .image-msg img {
  max-width: 250px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.self .time {
  text-align: right;
}

.self .main {
  flex-direction: row-reverse;
}

.self .avatar {
  margin: 0 0 0 10px;
}

.self .text {
  background-color: #cce6ff;
  box-shadow: none;
}

.msg-tool {
  height: 18px;
  padding: 0 6px;
  line-height: 18px;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  margin: 0 5px 0 5px;
  align-self: flex-end;
  color: #606266;
}

.el-dropdown-menu__item {
  padding: 0 20px 0 10px;
}

.tool-list {
  padding: 0 15px 0 10px;
  font-size: 12px;
}
</style>